<template>
	<view style="background-color: #FFFFFF;">
	<u-cell-group>
		<u-cell  title="选择楼号" :isLink="true" :value="building_name" arrow-direction="right" @click="show = true"></u-cell>
		<u-cell  title="选择房间号" :isLink="true" arrow-direction="right" :value="room_name"  @click="roomShow"></u-cell>
		<u-cell  title="水电日期" :isLink="true" arrow-direction="right" :value="date | formatDate"  @click="dateshow = true"></u-cell>
	</u-cell-group>
	<view class="repairList">
		 <text class="cont1">上次水表读数</text>
		 <u-input placeholder="请输入上次水表读数"  :value="oldWater" v-model="oldWater" :disabled = "oldWaterShow" inputAlign="right" type="number" disabledColor="#ffffff"></u-input>
	</view>
	<view class="repairList">
		 <text class="cont1">本月水表读数</text>
		 <u-input placeholder="请输入水表读数" :value="water" v-model="water" inputAlign="right" type="number"></u-input>
	</view>
	<view class="repairList">
		 <text class="cont1">上次电表读数</text>
		 <u-input placeholder="请输入上次电表读数" :value="oldEle" v-model="oldEle" :disabled = "oldEleShow" inputAlign="right" type="number" disabledColor="#ffffff"></u-input>
	</view>
	<view class="repairList">
		 <text class="cont1">本月电表读数</text>
		 <u-input placeholder="请输入电表读数" :value="ele" v-model="ele" inputAlign="right" type="number"></u-input>
	</view>
	<view style="margin-top: 40rpx;padding: 0 20rpx;" @click="submit">
	  <u-button type="primary" size="large">录入完成</u-button>
	  <!-- <u-button type="success" style="margin-top: 10px;" @click="btn" size="large">返回</u-button> -->
	</view>
	<view style="background-color: #FFFFFF;">
		  <u-cell-group
		      :border="false">
		    <u-cell
		        :titleStyle="{'font-size':'38rpx'}"
		        size="large"
		        title="录入记录"
		    ></u-cell>
		  </u-cell-group>
		  <view class="repairList">
		    <span class="cont">记录日期</span>
		    <span class="cont">房间号</span>
			 <span class="cont">水表读数</span>
			  <span class="cont">电表读数</span>
		    <!-- <u-tag text="维修中" v-if="item.status == 1"  size="mini" type="warning" shape="circle"></u-tag> -->
		  			<!-- <u-tag text="已处理" size="mini"  type="success" shape="circle"></u-tag> -->
		  			<!-- <u-tag text="待处理" size="mini" v-if="item.status == 1" type="primary" shape="circle"></u-tag> -->
		  </view>
		  <view class="repairList" v-for="(item,index) in list" :key="index" @click="goDetail(item.id)" >
		    <span class="cont" style="font-size: 24rpx;">{{item.record_date}}</span>
		    <span class="cont">{{item.room_name}}</span>
			 <span class="cont">{{item.water}}</span>
			  <span class="cont">{{item.electricity}}</span>
		    <!-- <u-tag text="维修中" v-if="item.status == 1"  size="mini" type="warning" shape="circle"></u-tag> -->
			<!-- <u-tag text="已处理" size="mini"  type="success" shape="circle"></u-tag> -->
			<!-- <u-tag text="待处理" size="mini" v-if="item.status == 1" type="primary" shape="circle"></u-tag> -->
		  </view>
	</view>
		<u-picker :show="show" :columns="columns" keyName="building_name"   itemHeight="80" @cancel="show = false" @confirm="chooseBuilding" :closeOnClickOverlay="true" @close="show = false"></u-picker>
		<u-picker :show="roomshow" :columns="roomList" keyName="name"   itemHeight="80" @cancel="roomshow = false" @confirm="chooseRoom" :closeOnClickOverlay="true" @close="roomshow = false"></u-picker>
		<u-datetime-picker :show="dateshow" v-model="date" mode="date" @cancel="dateshow = false" @confirm = "chooseDate" itemHeight="60" :closeOnClickOverlay="true" @close="dateshow = false"></u-datetime-picker>
		<!-- <u-button @click="show = true">打开</u-button> -->
	</view>
	
</template>

<script>
	import Api from '@/util/api.js'
	export default {
		data() {
			return {
				show: false,							//楼房选择器显示控制
				roomshow:false,							//房间选择器显示控制
				dateshow:false,							//日期选择器显示控制
				columns: [
					// ['中国', '中国','中国','中国','中国','中国','中国','中国','中国','中国','中国','中国','中国','中国','中国','中国','美国', '日本']
					// [{
					// 	label: '雪月夜',
					// 	// 其他属性值
					// 	id: 2021
					// 	// ...
					// }, {
					// 	label: '冷夜雨',
					// 	id: 804
					// }]
				],
				roomList:[
					// [{
					// 	label: '雪月夜',
					// 	// 其他属性值
					// 	id: 2021
					// 	// ...
					// }, {
					// 	label: '冷夜雨',
					// 	id: 804
					// }]
				],
				loading:false,							//加载
				building_name:'请选择楼号',				//楼房名称
				building_id:'',							//楼房id
				room_name:'请选择房间号',				//房间名称
				room_id:'',								//房间id
				date:Number(new Date()),				//水电日期
				oldWater:'',							//上次水表读数
				water:'',								//本月水表读数
				oldEle:'',								//上次电表读数
				ele:'',									//本月电表读数
				oldWaterShow:false,						//上次水表读数输入框是否禁用
				oldEleShow:false,						//上次电表读数输入框是否禁用
				userInfo:'',
				list:[],								//录入记录
			};
		},
		onLoad() {
			var that  = this
			that.getBuilding()
			that.checkUser()
			that.get_water_ele_list()
		},
		
		methods:{
			
			get_water_ele_list(){
				var that = this
				Api.get_water_ele_list().then(res=>{
					console.log('获取成功',res)
					that.list = res.data
				})
			},
			// 提交数据
			submit(e){
				var that = this
				if(that.room_id == ''){
					uni.showToast({
						title: '请选择房间号',
						duration: 2000,
						icon:'none'
					});
					return;
				}else if(that.oldWater == ''){
					uni.showToast({
						title: '请填写上次水表读数',
						duration: 2000,
						icon:'none'
					});
					return;
				}else if(that.water == ''){
					uni.showToast({
						title: '请填写水表读数',
						duration: 2000,
						icon:'none'
					});
					return;
				}else if(that.oldEle == ''){
					uni.showToast({
						title: '请填写上次电表读数',
						duration: 2000,
						icon:'none'
					});
					return;
				}else if(that.ele == ''){
					uni.showToast({
						title: '请填写电表读数',
						duration: 2000,
						icon:'none'
					});
					return;
				}else{
					var data = {
						room_id:that.room_id,
						record_date:that.date,
						water:that.water,
						electricity:that.ele,
						before_water:that.oldWater,
						before_electricity:that.oldEle,
						user_id:that.userInfo.id
					}
					console.log(data)
					uni.showLoading({
						title: '录入中'
					});
					Api.addWaterEleRecord(data).then(res=>{
						console.log('添加',res)
						if(res.msg == '录入成功'){
							that.water = ''
							that.ele   = ''
						}else{
							uni.showToast({
							    icon: 'none',   
							    duration: 3000,
							    title: `${res.msg}`
							});
						}
						uni.hideLoading();
						that.get_water_ele_list()
					})
				}
			},
			// 选择日期
			chooseDate(e){
				console.log('日期',e)
				var that = this
				that.date = e.value
				that.dateshow = false
			},
			// 打开房间选择器
			roomShow(){
				var that = this
				if(that.building_id == ''){
					uni.showToast({
						title: '请先选择楼号',
						duration: 2000,
						icon:'none'
					});
					return;
				}
				that.roomshow = true
			},
			// 选择房间号
			chooseRoom(e){
				var that = this
				console.log('选择房间号',e)
				that.room_id = e.value[0].id
				that.room_name = e.value[0].name
				var data = {
					room_id:e.value[0].id,
					state:1
				}
				Api.getWaterEle(data).then(res=>{
					console.log('获取成功',res)
					if(res.msg == '获取成功'){
						that.oldWater = res.data.water
						that.oldEle   = res.data.electricity
						that.oldWaterShow = true
						that.oldEleShow   = true
						that.water = ''
						that.ele   = ''
					}else{
						that.oldWater = ''
						that.oldEle   = ''
						that.oldWaterShow = false
						that.oldEleShow   = false
						that.water = ''
						that.ele   = ''
					}
				})
				that.roomshow = false
			},
			
			// 选择楼号
			chooseBuilding(e){
				console.log('确认事件',e)
				var that = this
				that.show = false
				uni.showLoading({
					title: '加载中'
				});
				that.building_name = e.value[0].building_name
				that.building_id = e.value[0].id
				var data = {
					id:e.value[0].id
				}
				var roomList = []
				Api.getRoomList(data).then(res=>{
					console.log('获取成功',res)
					roomList.push(res.data)
					that.roomList = roomList
					uni.hideLoading();
					console.log(that.roomList)
				})
				
			},
			// 获取楼房列表
			getBuilding(){
				var that = this
				Api.getBuilding().then(res=>{
					console.log('获取成功',res)
					that.columns.push(res.data)
					console.log(that.columns)
				})
			},
			// 检查用户信息
			checkUser(){
				var that  = this
				var userInfo = that.userInfo;
					if(localStorage.getItem('userInfo')){
						that.userInfo = JSON.parse(localStorage.getItem('userInfo'))
					}else{
						uni.showToast({
						    icon: 'none',   
						    duration: 3000,
						    title: "当前用户未登录"
						});
						return;
					}
				
				
			},
		},
		filters: {
			formatDate(value) {
				console.log(value)
				let date = new Date(value);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				return y + '-' + MM + '-' + d; //年月日
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m+ ':' + s; //年月日时分秒
			}
		},
	}
</script>

<style lang="scss">
.repairList {
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 30rpx;
		align-items: center;
		border-bottom: solid #eaebec 1rpx;
	}
	.cont{
		width: 20%;
		overflow:hidden;/*内容超出后隐藏*/
		text-overflow:ellipsis;/*超出内容显示为省略号*/
		white-space:nowrap;/*文本不进行换行*/
	}
</style>
